.card {
    font-weight: $font-weight-normal;

    .card {
        @include box-shadow($z-depth-1-half);
    }

    @each $color, $value in $theme-colors {
        &--#{$color} {
            border-top: 2px solid $value;
        }
    }

    @each $color, $value in $theme-colors {
        &--outline-#{$color} {
            border: 2px solid $value;
        }
    }

    &-body {
        + .card-body {
            border-top: 1px solid rgba(0,0,0,.125);
        }

        &--fnd-badge-holder {
            .fnd-badge {
                right: 0;
                top: 0;
                transform: translate(30%, -30%) rotate(15deg);
            }
        }

        &--blocked {
            position: relative;
            z-index: 0;
            filter: grayscale(75%) blur(1.5px);

            &::after {
                display: block;
                content: '';
                background-color: rgba($black, 0.1);
                position: absolute;
                z-index: 1;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
            }
        }
    }

    &-text {

        &[class*='card-text--step-'] {
            position: relative;
            padding-left: 2rem;

            &::before {
                color: $primary-color;
                left: 0;
                top: 0;
                display: block;
                width: 2rem;
                font-size: 2rem;
                text-align: left;
                height: 100%;
                position: absolute;
                line-height: 1rem;
            }
        }

        @each $step in (1, 2, 3, 4, 5, 6, 7, 8, 9, 10) {
            &--step-#{$step} {
                &::before {
                    content: '#{$step}. ';
                }
            }
        }
    }

    &-header {
        color: $gray-500;
        font-size: $font-size-sm;
        font-weight: $font-weight-bold;
        background-color: $white;
        border-color: $gray-a100;

        &--label {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
        }

        &--with-label {
            position: relative;
            overflow: hidden;
        }

        &-label {
            position: absolute;
            right: 0;
            width: 4.6875rem;
            height: 4.6875rem;
            top: 0;
            color: $white;
            text-transform: uppercase;
            font-size: .5rem;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            transform: rotate(45deg) translate(0, -75%);

            &--success {
                background: $success;
            }

            &--info {
                background: $info;
            }
        }
    }

    &--developer,
    &--social {
        border-top: 2px solid transparent;
        height: 100%;

        .card-body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    }

    &--social {
        h5.card-header {
            line-height: 2.625rem;
        }
    }

    &--developer--primary,
    &--social--primary {
        border-top-color: $primary-color;
    }

    &--developer--success,
    &--social--success {
        justify-content: flex-end;
        border-top-color: $success-color;
    }

    &--developer--warning {
        justify-content: flex-end;
        border-top-color: $warning-color;
    }

    &-footer {
        &--light {
            background-color: $white;
            color: $gray-500;
        }
    }
}

.card-top-image {
    margin-left: 10%;
    margin-right: 10%;
    margin-top: -1.25rem;
    height: 9.375rem;
    background-color: $blue-200;
    background-image: url("../img/error.png");
    background-size: contain;
    background-repeat: repeat-x;
    background-position: center center;
    @include box-shadow($z-depth-2);
}
